<script setup>

import {ref} from "vue";
import axios from "axios";

let input = ref('');
//分页数据
let currentPage = ref(1);
let pageSize = ref(5);
let total = ref(0);

const size = ref('default');
//存储的是勾选的数据的id数组
const multipleSelection =ref([])
const handleSelectionChange = (val) => {
  multipleSelection.value = val
  console.log(multipleSelection.value)
}
//列表数据
let tableData = ref([]);

// 展示数据
const Book = async ()=>{
  try {
    const param = {
      pageNum:currentPage.value,
      pageSize:pageSize.value,
      consultType:input.value
    }
    const response = await axios.get("api/hdx",{
      params:param
    });
    const pageInfo = response.data.data;
    console.log("获取传递的数据",pageInfo.list);
    console.log(pageInfo);
    tableData.value = pageInfo.list;
    //分页条的信息
    total.value = pageInfo.total;
    pageSize.value = pageInfo.pageSize;
    currentPage.value = pageInfo.pageNum;
  }catch (error){
    console.log("传递数据失败",error);
  }
}
Book();

//删除单个咨询
const deleteBook = async (id)=> {
  const confirmDelete = window.confirm('确定要删除所选记录吗？');
  if (confirmDelete) {
    const remove = async () => {
      try {
        const response = await axios.delete(`/api/hdx/${id}`);
        console.log(response.data);
      } catch (error) {
        console.log("删除失败", error);
      }
    }
    await remove();
    Book();
  }
}
//根据咨询类型查询数据
function searchBook(){
  Book();
}

//修改一页的总数据量
const handleSizeChange = ()=>{
  Book();
}
//更换页码
const handleCurrentChange = ()=>{
  console.log(currentPage.value)
  Book();
}
//批量删除
const deleteBatch = async ()=> {
  const confirmDelete = window.confirm('确定要删除所选记录吗？');
  if (confirmDelete) {
    const removeBatch = async () => {
      const ids = multipleSelection.value.map(item => item.id);
      try {
        const response = await axios.delete("/api/hdx/batch", {
          data: ids
        });
        console.log(response.data);
      } catch (error) {
        console.log("批量删除失败", error);
      }
    };
    await removeBatch()
    Book();
  }
}
</script>

<template>
   <div style="margin-left: 15px">
     <div style="padding: 10px 0;border-bottom: solid 1px #cccccc; border-top: solid 1px #cccccc">
       <text style="font-weight: 600">首页</text> / 咨询预约管理 / 咨询预约管理
     </div>
     <div style="margin: 15px 0;display: flex">
         <el-input v-model="input" style="width: 240px" placeholder="请输入咨询类型" clearable/>
       <div style="position: relative;left: 10px">
         <el-button type="primary" @click="searchBook">搜索</el-button>
         <el-button type="danger" @click="deleteBatch">批量删除</el-button>
       </div>
     </div>
     <el-table :data="tableData"
               border
               style="width: 100%"
               ref="multipleTableRef"
               row-key="id"
               @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" />
       <el-table-column prop="id" label="ID" align="center"/>
       <el-table-column prop="user.nickname" label="用户昵称" align="center"/>
       <el-table-column prop="expertiseField.fieldName" label="咨询类型" align="center"/>
       <el-table-column prop="consultTime" label="咨询时间" align="center"/>
       <el-table-column prop="consultContent" label="咨询内容" align="center"/>
       <el-table-column prop="status" label="状态" align="center">
         <template #default="{ row }">
           <span v-if="row.status === 0" style="color: green">未回复</span>
           <span v-if="row.status === 1" style="color: skyblue">已评价</span>
           <span v-if="row.status === 2" style="color: red">未评价</span>
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center">
          <template #default = "scope">
            <el-button
                type="danger"
                @click="deleteBook(scope.row.id)"
            >删除咨询</el-button>
          </template>
       </el-table-column>
     </el-table>
     <div style="margin-top: 10px">
       <el-pagination
           v-model:current-page="currentPage"
           v-model:page-size="pageSize"
           :page-sizes="[5, 10, 15, 20]"
           :size="size"
           :disabled="disabled"
           :background="background"
           layout="total, sizes, prev, pager, next, jumper"
           :total="total"
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
       />
     </div>
   </div>
</template>

<style scoped>

</style>